<template>
	
	<form @submit="submit" :data-action="`/api/waterCollector/save?stationId=${param.stationId}`">
			
			<view class="fixAuto bb middle">
				<view class="w100 main bold">
					基本信息
				</view>
			</view>
			
			<view class="fixAuto bb middle">
				<view class="w100">
					设备型号
				</view>
				<view>
					<input type="text" name="x.equipmentNo|设备型号|0~200"  v-model="data.equipmentNo" :disabled="disabled" placeholder="请输入设备型号">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					生产商
				</view>
				<view>
					<input type="text" name="x.factory|生产商|0~200"  v-model="data.factory" :disabled="disabled" placeholder="请输入生产商">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					生产许可编号
				</view>
				<view>
					<input type="text" name="x.productLicenseNo|生产许可证编号|0~200"  v-model="data.productLicenseNo" :disabled="disabled" placeholder="请输入生产许可证编号">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					环保认证编号
				</view>
				<view>
					<input type="text" name="x.certificationNo|环保产品认证编号|0~200"  v-model="data.certificationNo" :disabled="disabled" placeholder="请输入环保产品认证编号">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					软件系统环境
				</view>
				<view>
					<input type="text" name="x.softwareSystem|软件系统环境|0~200"  v-model="data.softwareSystem" :disabled="disabled" placeholder="请输入软件系统环境">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					软件版本号
				</view>
				<view>
					<input type="text" name="x.softwareVersion|软件版本号|0~200"  v-model="data.softwareVersion" :disabled="disabled" placeholder="请输入软件版本号">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					MN号
				</view>
				<view>
					<input type="text" name="x.mn|MN号|0~200"  v-model="data.mn" :disabled="disabled" placeholder="请输入MN号">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					IP地址
				</view>
				<view>
					<input type="text" name="x.ip|IP地址|0~200"  v-model="data.ip" :disabled="disabled" placeholder="请输入IP地址">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					通讯方式
				</view>
				<view>
					<input type="text" name="x.communicationMode|通讯方式|0~200"  v-model="data.communicationMode" :disabled="disabled" placeholder="请输入通讯方式">
				</view>
			</view>
			<view class="fixAuto bb middle">
				<view class="w100">
					通讯协议
				</view>
				<view>
					<input type="text" name="x.communicationProtocol|通讯协议|0~200"  v-model="data.communicationProtocol" :disabled="disabled" placeholder="请输入通讯协议">
				</view>
			</view>
			
			<view class="grayBg pd5"></view>
			<view class="fixAuto bb">
				<view class="w100 main bold">
					通道情况	
				</view>
				<view>
					<view  class="flex right" @tap="add" v-if="!disabled">
						<view class="sIcon-addCircle bold main fz16"></view>
					</view>
				</view>
			</view>
			
			<block v-for="( item , index) in channelList" :key="index">
				<view class="grayBg" :class="{'pt0' : index > 0}">
					<view class="whiteBg father">
						<view @tap="remove(index)"  v-if="!disabled" class="sIcon-close abs top right pr10 pt5"></view>
						<view class="pr30">
							<view class="fixAuto bb middle">
								<view class="w100">
									监测因子参数	
								</view>
								<view>
									<input type="text" v-model="item.params" placeholder="请输入监测因子/参数">
								</view>
							</view>
							<view class="fixAuto bb middle">
								<view class="w100">
									量程
								</view>
								<view>
									<input type="text" v-model="item.range" placeholder="请输入量程">
								</view>
							</view>
							<view class="fixAuto bb middle">
								<view class="w100">
									传输模式	
								</view>
								<view>
									<input type="text" v-model="item.mode" placeholder="请输入传输模式">
								</view>
							</view>
						</view>
					</view>
					<view class="pt5 grayBg"></view>
				</view>
			</block>
			<block>
				<view class="text-center pd20 gray whiteBg" v-if="disabled && channelList.length == 0">
					暂无通道情况~
				</view>
			</block>
			
			
			<view class="plr100 pd30" v-if="!disabled">
				<button form-type="submit" class="btn block rds23">
					保存记录
				</button>
			</view>
		</form>

	</layout>
</template>

<script>
	export default {
		data() {
			return {
				param:{stationId:""} ,
				data : {} ,
				disabled : true ,
				channelList : []
			}
		},
		onLoad(params) {
			this.param = params ;
			var role = uni.getStorageSync("role");
			this.disabled = role != 2 ;
			this.loadData();
		},
		computed:{
			channelParams : function(e){
				var arr = [] ;
				for (var i = 0; i < this.channelList.length; i++) {
					var cur = this.channelList[i] ;
					if (cur.params || cur.mode || cur.range) {
						arr.push(cur);
					}
				}
				return JSON.stringify(arr);
			},
		},
		methods: {
			
			remove:function(e){
				this.channelList.splice(e,1);
			},
			
			add:function(e){
				this.channelList.push({
					params : "" ,
					range : "" ,
					mode : ""
				});
			},
			
			loadData:function(e){
				var data = {id:this.param.stationId} ;
				this.kit.get("/api/waterCollector/info",data,res => {
					this.data = res.data || {};
					this.channelList = res.channelList || [];
				});
			},
			
			submit:function(e){
				var data = this.form.check(e);
				if (!data) {
					return ;
				}
				data['x.channelParams'] = this.channelParams ;
				this.kit.get(`/api/waterCollector/save?stationId=${this.param.stationId}`,data,res => {
					this.success();	
				});
			},
			
			success:function(e){
				this.kit.goSuccessBack("保存成功");
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>